<template>
  <div class="page-style">
    <el-row>
      <el-col :span="10">
        <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="条码类型">
            <el-select v-model="ruleForm.type" placeholder="请选择条码类型">
              <el-option
                v-for="item in codeType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="旧条码">
            <el-input v-model="ruleForm.old_bar_code" type="Number" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item label="新条码">
            <el-input v-model="ruleForm.new_bar_code" type="Number" autocomplete="off" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">替换</el-button>
          </el-form-item>
        </el-form>
        <el-card class="card">
          <div slot="header">
            <span>说明:</span>
          </div>
          <ul>
            <li>输入完成后,请再次确认新码与旧码的准确性</li>
            <li>新标签为未关联标签</li>
            <li>旧标签为未发货标签</li>
            <li>替换后就标签自动作废</li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { barCodeResetApi } from '@/api/exception-harding'
export default {
  data() {
    return {
      ruleForm: {
        type: '',
        new_bar_code: '',
        old_bar_code: ''
      },
      codeType: [
        {
          value: '1',
          label: '大码'
        },
        {
          value: '2',
          label: '中码'
        },
        {
          value: '3',
          label: '小码'
        }
      ]
    }
  },
  methods: {
    submitForm() {
      this.$confirm(`是否确认用新码" ${this.ruleForm.new_bar_code} " 替换旧码" ${this.ruleForm.old_bar_code} "`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // console.log(this.ruleForm)
        const data = {
          type: this.ruleForm.type,
          new_bar_code: this.ruleForm.new_bar_code.trim(),
          old_bar_code: this.ruleForm.old_bar_code.trim()
        }
        if (data.new_bar_code.length !== data.old_bar_code.length) {
          this.$message.warning('请确认条码正确，保证新旧码一致')
          return false
        }
        barCodeResetApi(data).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '替换成功!!'
            })
            this.ruleForm = {
              type: '',
              new_bar_code: '',
              old_bar_code: ''
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style scoped>
  .card {
    font-size: 12px;
    color:#aaa;
  }
  .card li {
    line-height: 20px;
  }

</style>
